<template>
	<view>
		<header-bar :title=titleName>
		</header-bar>
		<view-tabbar tabIndex=3></view-tabbar>
		<uni-list>
			<uni-list :border="true">
				<!-- 头像显示圆点 -->
				<uni-list-chat :avatar-circle="true" title="川岛奈奈子 🦋"
					avatar="https://s2.loli.net/2022/06/07/TRWhZHrfc3wQvX6.jpg" note="你好 ! 在吗 ？我想问一下有售后服务吗？"
					badge-positon="left" badge-text="dot" @click="go_1" link>
					<view class="chat-custom-right">
						<text class="chat-custom-text">5分钟前 👤</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="#999" size="19"></uni-icons>
					</view>
				</uni-list-chat>
				<!-- 头像显示角标 -->
				<uni-list-chat :avatar-circle="true" title="鹿鹿迷路了i 🦄"
					avatar="https://s2.loli.net/2022/05/26/4UTkNH6oAsZ1rqL.jpg" note="好的,谢谢你了 !" badge-positon="left"
					badge-text="2" @click="go_2" link>
					<view class="chat-custom-right">
						<text class="chat-custom-text">10分钟前 👤</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="orange" size="19"></uni-icons>
					</view>
				</uni-list-chat>
				<!-- 自定义右侧内容 -->
				<uni-list-chat title="魔仙堡 💕" :avatar-list="avatarList" note="你们最近都买了什么好物 , 给我推荐推荐叭"
					badge-positon="left" badge-text="dot" @click="go_3" link>
					<view class="chat-custom-right">
						<text class="chat-custom-text">15分钟前 👥</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="#999" size="19"></uni-icons>
					</view>
				</uni-list-chat>
				<uni-list-chat :avatar-circle="true" title="是你随影i 🍭"
					avatar="https://s2.loli.net/2022/05/26/QDRcHTAGaES3mpB.jpg" note="请问可以再优惠一点点吗"
					time="2020-02-02 20:20" badge-positon="left" badge-text="8" @click="go_4" link>
					<view class="chat-custom-right">
						<text class="chat-custom-text">20分钟前 👤</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="orange" size="19"></uni-icons>
					</view>
				</uni-list-chat>
				<uni-list-chat :avatar-circle="true" title="空白 🍇"
					avatar="https://s2.loli.net/2022/05/26/YW28JKOPZFbHLf9.jpg" note="你好 ! 我申请了退货 , 钱什么时候能到账"
					badge-positon="left" badge-text="16" @click="go_5" link>
					<view class="chat-custom-right">
						<text class="chat-custom-text">1小时前 👤</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="orange" size="19"></uni-icons>
					</view>
				</uni-list-chat>
				<uni-list-chat :avatar-circle="true" title="抚半世妖娆 🌞"
					avatar="https://s2.loli.net/2022/05/26/nxOlt3D6ofP4vgT.jpg" note="你这服务态度真差劲 , 卖个二手货要求还挺多"
					badge-positon="left" badge-text="dot" @click="go_6" link>
					<view class="chat-custom-right">
						<text class="chat-custom-text">2小时前 👤</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="#999" size="19"></uni-icons>
					</view>
				</uni-list-chat>
				<!-- 自定义右侧内容 -->
				<uni-list-chat title="盘丝洞 🍍" :avatar-list="avatarList1" note="我给你们分享了一款好物" badge-positon="left"
					badge-text="dot" @click="go_4" link>
					<view class="chat-custom-right">
						<text class="chat-custom-text">4小时前 👥</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="#999" size="19"></uni-icons>
					</view>
				</uni-list-chat>
				<uni-list-chat :avatar-circle="true" title="森林迷了路 💧"
					avatar="https://s2.loli.net/2022/05/26/NJ9ZroGvQzVPygx.jpg" note="快发货 ! 快发货 ! 快发货 ! 快发货 !"
					time="2020-02-02 20:20" badge-positon="left" badge-text="99" @click="go_3" link>
					<view class="chat-custom-right">
						<text class="chat-custom-text">8小时前 👤</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="orange" size="19"></uni-icons>
					</view>
				</uni-list-chat>
				<uni-list-chat :avatar-circle="true" title="失眠飞行 🌝"
					avatar="https://s2.loli.net/2022/05/26/eTKg4QAjptCvbVM.jpg" note="我收到货了 , 真的很喜欢!"
					badge-positon="left" badge-text="7" @click="go_4" link>
					<view class="chat-custom-right">
						<text class="chat-custom-text">1天前 👤</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="#999" size="19"></uni-icons>
					</view>
				</uni-list-chat>
				<uni-list-chat :avatar-circle="true" title="麻烦制造者 💠"
					avatar="https://s2.loli.net/2022/05/26/4AHn8oDghBFIb7v.jpg" note="你这有质量问题吧,虽然是二手差别也太大了"
					badge-positon="left" badge-text="dot" @click="go_5" link>
					<view class="chat-custom-right">
						<text class="chat-custom-text">2天前 👤</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="orange" size="19"></uni-icons>
					</view>
				</uni-list-chat>
				<uni-list-chat :avatar-circle="true" title="JOR 🐲"
					avatar="https://s2.loli.net/2022/05/26/yPiCQKvkwtHu12z.jpg" note="你好 ! 价格可以再商量商量吗"
					badge-positon="left" badge-text="3" @click="go_1" link>
					<view class="chat-custom-right">
						<text class="chat-custom-text">10天前 👤</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="orange" size="19"></uni-icons>
					</view>
				</uni-list-chat>
				<!-- 自定义右侧内容 -->
				<uni-list-chat title="三个小恶魔 😈‍‍‍‍‍‍" :avatar-list="avatarList2" note="安利一款好用的化妆品套装"
					badge-positon="left" badge-text="dot" @click="go_2" link>
					<view class="chat-custom-right">
						<text class="chat-custom-text">2022-04-29 👥</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="#999" size="19"></uni-icons>
					</view>
				</uni-list-chat>
				<uni-list-chat :avatar-circle="true" title="夏至未至 🐖"
					avatar="https://s2.loli.net/2022/05/26/RKVwiq1hxQOj3Zo.jpg" note="谢谢你" badge-positon="left"
					badge-text="10" @click="go_3" link>
					<view class="chat-custom-right">
						<text class="chat-custom-text">2021-12-25 👤</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="star-filled" color="orange" size="19"></uni-icons>
					</view>
				</uni-list-chat>
			</uni-list>
		</uni-list>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				titleName:"消息",
				avatarList: [{
					url: 'https://s2.loli.net/2022/05/26/rdRQtgNxYy8WFIw.jpg'
				}, {
					url: 'https://s2.loli.net/2022/05/26/4UTkNH6oAsZ1rqL.jpg',
				}, {
					url: 'https://s2.loli.net/2022/05/26/pNhn9CRgoLU8yHI.jpg',
				}],
				avatarList1: [{
					url: 'https://s2.loli.net/2022/05/26/QDRcHTAGaES3mpB.jpg'
				}, {
					url: 'https://s2.loli.net/2022/05/26/nxOlt3D6ofP4vgT.jpg',
				}, {
					url: 'https://s2.loli.net/2022/05/26/NJ9ZroGvQzVPygx.jpg',
				}],
				avatarList2: [{
					url: 'https://s2.loli.net/2022/05/26/RKVwiq1hxQOj3Zo.jpg'
				}, {
					url: 'https://s2.loli.net/2022/05/26/nxOlt3D6ofP4vgT.jpg',
				}, {
					url: 'https://s2.loli.net/2022/05/26/NJ9ZroGvQzVPygx.jpg',
				}],
				goods_list: [{
						goods: [{
								img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',
							},
							{
				  		img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',
							},
							{
								img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',
							},
						]
					},
					{
						goods: [{
								img: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg',
							},
							{
								img: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg',
							},
				  	{
								img: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg',
							},
						]
					},
					{
						goods: [{
				  		img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',
							},
							{
								img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',
							},
							{
								img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',
							},
						]
					}
				],
				g_list: [{
						img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',
					},
					{
						img: 'https://i.postimg.cc/pXDp6RXq/susu3.jpg',
					},
					{
						img: 'https://i.postimg.cc/XJmpTvCD/susu2.jpg',
					},
					{
						img: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg',
					},
					{
						img: 'https://i.postimg.cc/WzKK73vQ/20210729155755.jpg',
					},
					{
						img: 'https://i.postimg.cc/Bn1XpkSn/susu.jpg',
					},
					{
						img: 'https://i.postimg.cc/65STLQNc/333.webp',
					},
				],
				d_num: 3,
			}
		},
		onShareAppMessage() {
			return {
				title: "分享我的消息页面"
			}
		},
		methods: {
			go_1: function() {
				uni.navigateTo({
					url: '/subpkg/chat4/chat4'
				});
			},
			go_2: function() {
				uni.navigateTo({
					url: '/subpkg/chat1/chat1'
				});
			},
			go_3: function() {
				uni.navigateTo({
					url: '/subpkg/chat2/chat2'
				});
			},
			go_4: function() {
				uni.navigateTo({
					url: '/subpkg/chat3/chat3'
				});
			},
			go_5: function() {
				uni.navigateTo({
					url: '/subpkg/chat5/chat5'
				});
			},
			go_6: function() {
				uni.navigateTo({
					url: '/subpkg/chat6/chat6'
				});
			},
		}
	}
</script>

<style lang="scss">
	button {
		position: absolute;
		top: 65rpx;
		right: 67rpx;
		width: 95rpx;
		height: 53rpx;

		span {
			position: absolute;
			left: 17rpx;
			font-size: 20rpx;
		}
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.title {
		white-space: pre-wrap;
		width: 50rpx;
		text-align: center;
		font-weight: 600;
		color: #fff;
		font-size: 30rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.t_box:after {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.point_flex_w {
		float: left;
		width: 100%;
		height: 192rpx;
		text-align: center;
	}


	.wd1 {
		width: 28%;
	}

	.wd2 {
		width: 56%;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}
</style>
